import React, { useState } from 'react';
import { Card, Button, Checkbox, Form, Input, Tooltip, message } from 'antd';
import { GlobalOutlined, QuestionCircleOutlined, FileDoneOutlined, CheckOutlined, ExclamationCircleOutlined } from '@ant-design/icons';

import './index.scss';
function Web(props) {
    const [form] = Form.useForm();
    function onFinish() {
        message.success("网络配置已更新")
    }
    function onTest() {
        message.info('正在执行测试');
        message.success("测试连接成功")
    }
    function onReset() {
        form.resetFields();
    }
    return (
        <div className="web-container">
            <div className="row-a1">
                <div className="left">
                    <div className="con-a1">
                        <Card title={
                            <div className='title'>
                                <GlobalOutlined style={{ color: '#08c' }} />
                                <span className="tit">网络配置</span>
                            </div>
                        }>
                            <Form
                                form={form}
                                layout="vertical"
                                name="form"
                                autoComplete="off"
                                onFinish={onFinish}
                            >
                                <Form.Item
                                    label={
                                        <div className="label-with-tooltip">
                                            <span className="item-tit">IP地址</span>
                                            <Tooltip title="请输入有效的IPv4地址">
                                                <QuestionCircleOutlined style={{ color: '#3498db', marginLeft: 4 }} />
                                            </Tooltip>
                                        </div>
                                    }
                                    name="ip"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入IP地址',
                                        },
                                    ]}
                                    extra="示例: 192.168.10.10"
                                >
                                    <Input placeholder='例如 192.168.10.10' />
                                </Form.Item>

                                <Form.Item
                                    label="子网掩码"
                                    name="subnet"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入子网掩码!',
                                        },
                                    ]}
                                    extra="示例: 255.255.255.0"
                                >
                                    <Input placeholder='例如 255.255.255.0' />
                                </Form.Item>

                                <Form.Item
                                    label="默认网关"
                                    name="gateway"  // 修正字段名，从 "web" 改为 "gateway"
                                    rules={[
                                        {
                                            required: true,
                                            message: '请输入默认网关!',  // 修正错误消息
                                        },
                                    ]}
                                    extra="示例: 192.168.10.1"
                                >
                                    <Input placeholder='例如 192.168.10.1' />
                                </Form.Item>

                                <Form.Item name="dhcpEnabled"
                                    valuePropName="checked"  // 重要：告诉 Form 这是 checked 属性
                                    initialValue={false}>
                                    <div>
                                        <Checkbox
                                        >
                                            启用DHCP自动获取
                                        </Checkbox>
                                        <Tooltip title="启用后将自动获取网络配置">
                                            <QuestionCircleOutlined style={{ color: '#3498db' }} />
                                        </Tooltip>
                                    </div>
                                </Form.Item>

                                <Form.Item>
                                    <Button className='test-btn' icon={<FileDoneOutlined />} type="primary" onClick={onTest}>
                                        测试连接
                                    </Button>
                                    <Button className='submit-btn' icon={<CheckOutlined />} type="primary" htmlType="submit">
                                        保存配置
                                    </Button>
                                    <Button className='reset-btn' type="primary" onClick={onReset}>
                                        重置
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Card>
                    </div>
                </div>
                <div className="right">
                    <div className="con-a2">
                        <Card title={
                            <div className='title'>
                                <ExclamationCircleOutlined style={{ color: '#08c' }} />
                                <span className="tit">系统状态</span>
                            </div>
                        }>
                            <div className="list">
                                <div className="li">
                                    <div className="tit">
                                        网络状态
                                    </div>
                                    <div className="text">
                                        <div className="light">

                                        </div>
                                        <div className="txt">
                                            已连接
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        当前IP
                                    </div>
                                    <div className="text">
                                        <div className="txt">
                                            192.168.101.118
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        服务器地址
                                    </div>
                                    <div className="text">
                                        <div className="txt">
                                            192.168.101.108
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        料架序列号
                                    </div>
                                    <div className="text">
                                        <div className="txt">
                                            SO1542-03
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        串口状态
                                    </div>
                                    <div className="text">
                                        <div className="light">

                                        </div>
                                        <div className="txt">
                                            正常
                                        </div>
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="tit">
                                        运行时长
                                    </div>
                                    <div className="text">
                                        <div className="txt">
                                            12小时34分
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </div>
                    <div className="con-a3">
                        <Card title={
                            <div className='title'>
                                <span className="tit">操作日志</span>
                            </div>
                        }>
                            <div className="list">
                                <div className="li">
                                    <div className="date">
                                        14:23:45
                                    </div>
                                    -
                                    <div className="txt">
                                        网络配置已更新
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="date">
                                        14:20:12
                                    </div>
                                    -
                                    <div className="txt">
                                        连接测试成功
                                    </div>
                                </div>
                                <div className="li">
                                    <div className="date">
                                        14:15:33
                                    </div>
                                    -
                                    <div className="txt">
                                        系统启动成功
                                    </div>
                                </div>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    );
}

export default Web;